<template>
	<view>
		<view class="bg508DFD " :style="{paddingTop:shh+'px'}"></view>
		<view class="pt20 pb30 bg508DFD height120"></view>
		
		
		<view v-if="user.is_vip" class="con mt-230 posire">
			<image src="/static/kvip.png" mode="widthFix" class="image"></image>
			<view class="pt30 pb30  posiab top10 left20 width1000">
				<view class="con flex-a-i">
					<image :src="user.avatar" class="wh140-140 ra140"></image>
					<view class=" ml20">
						<view class="color712205 size30 ">{{user.nickname}}</view>
						<view class="flex-ju-b  color737373 mt10">
							<view class="igbto pg2-15 ra10 size25 colorFFDEA5">VIP会员</view>
						</view>
					</view>
				</view>
				<view class="color712205 bold size41 ml30 mt25">
					<image mode="widthFix" class="width100" src="/static/vvip.png"></image>
					{{user.vip_level_name}}
				</view>
				<view class=" size30 ml30 ">会员权益</view>
			</view>
		</view>
		<view v-else class="con mt-230 posire">
			<image src="/static/wvip.png" mode="widthFix" class="image"></image>
			<view class="pt30 pb30  posiab top10 left20 width1000">
				<view class="con flex-a-i">
					<image :src="user.avatar" class="wh140-140 ra140"></image>
					<view class=" ml20">
						<view class="colorfff size30 ">{{user.nickname}}</view>
						<view class="flex-ju-b  color737373 mt10">
							<view class="bgBFBFBF pg2-15 ra10 size25">体验用户</view>
						</view>
					</view>
				</view>
				<view class="colorfff size30 ml50 mt30">未开通</view>
			</view>
		</view>
		
		
		<view class="ml50 size33 mt10 color712205">
			选择套餐
		</view>
		<view  class=" mt30 con">
			<scroll-view scroll-x style="width: 100%;white-space: nowrap;" >
					
				<view v-for="(item,h) in list" class="scroll-view-item_H mr20" style="width:31%;">
					<view @click="tapvip(h)" class="bot height270 ra30 flex-col flex-ju-a center "  :class="{bordera:tindex==h}">
						<view  :class="{color712205:tindex==h}">{{item.title}}</view>
						<view class="size41 bold" :class="{color712205:tindex==h}">¥{{item.pre_price}}</view>
						<view class="flex-ju-c">
							<view class="bgFFEFE0 ra5 wh130-30 size18 color9B8A80">每天仅{{(item.pre_price/item.vip_day).toFixed(2)}}元</view>
						</view>
					</view>
				</view>
				
			</scroll-view>
			
			<!-- <view @click="tapvip(0)" class="bot height270 ra30 flex-col flex-ju-a center" :class="{bordera:tindex==0}">
				<view  :class="{color712205:tindex==0}">{{list[0].title}}</view>
				<view class="size41 bold" :class="{color712205:tindex==0}">¥{{list[0].pre_price}}</view>
				<view class="flex-ju-c">
					<view class="bgFFEFE0 ra5 wh130-30 size18 color9B8A80">每天仅{{(list[0].pre_price/list[0].vip_day).toFixed(2)}}元</view>
				</view>
			</view>
			<view class="width20"></view>
			<view @click="tapvip(1)" class="bot height270 ra30 flex-col flex-ju-a center" :class="{bordera:tindex==1}">
				<view  :class="{color712205:tindex==1}">{{list[1].title}}</view>
				<view class="size41 bold" :class="{color712205:tindex==1}">¥{{list[1].pre_price}}</view>
				<view class="flex-ju-c">
					<view class="bgFFEFE0 ra5 wh130-30 size18 color9B8A80">每天仅{{(list[1].pre_price/list[1].vip_day).toFixed(2)}}元</view>
				</view>
			</view>
			<view class="width20"></view>
			<view @click="tapvip(2)" class="bot height270 ra30 flex-col flex-ju-a center" :class="{bordera:tindex==2}">
				<view :class="{color712205:tindex==2}">{{list[2].title}}</view>
				<view class="size41 bold" :class="{color712205:tindex==2}">¥{{list[2].pre_price}}</view>
				<view class="flex-ju-c">
					<view class="bgFFEFE0 ra5 wh130-30 size18 color9B8A80">每天仅{{(list[2].pre_price/list[2].vip_day).toFixed(2)}}元</view>
				</view>
			</view> -->
			
		</view>
		<view class="con pb150 mt50">
			<view class="showg pg30 ra25 ">
				<view class="size33 color712205 bold flex-ju-c">会员权益</view>
				<view class="size22 color712205" style="line-height: 18px;">
					<mp-html :content="rights" />
				</view>
			</view>
		</view>
		<view v-if="user.is_vip!=1" @click="govip" class="posifi bottom20 width1000">
			<view class="bgFFC174 flex-ju-c ml30 height100 size33 ra50 color712205 bold mr30">开通会员</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				tindex:0,
				list:[],
				rights:[],
				user:{}
			}
		},
		onLoad() {
			this.user=uni.getStorageSync('user')
			
			this.http('user/member/card/index').then(res=>{
				this.list=res.data.member_type
			})
			this.http('get_agreement/9').then(res=>{
				this.rights=res.data.content
			})
			
			// this.http('member/right').then(res=>{
			// 	this.rights=res.data.list
			// })
			
		},
		methods: {
			govip(){
				if(this.user.is_company==1){
					this.http('user/member/card/create_member',{
						member_type_id:this.list[this.tindex].mc_id
					},'post').then(res=>{
						 var jsConfig = res.data.result.jsConfig
						 uni.requestPayment({
						 	timeStamp: jsConfig.timestamp,
						 	nonceStr: jsConfig.nonceStr,
						 	package: jsConfig.package,
						 	signType: jsConfig.signType,
						 	paySign: jsConfig.paySign,
						 	success:(res)=> {
						 		uni.reLaunch({
						 			url:"/pages/user/index"
						 		})
						 	},
						 	fail(res) {
						 		uni.showToast({
						 			title:"支付失败",
									icon:"none"
						 		})
						 	}
						 })
						 
					})
				}else{
					uni.navigateTo({
						url:"enterprise_info"
					})
				}
				
			},
			tapvip(index,id){
				this.tindex = index
			}
		}
	}
</script>

<style>
	.igbto{
		background-image: linear-gradient(to right,#383C55,#6F6F6F)
	}
	.showg{
		box-shadow: 0rpx 6rpx 13rpx 0rpx rgba(28,48,75,0.18);
	}
	.bordera{
		border: 2px solid #772D12;
	}
	.bot{
		/* width:200px; */
		/* width: 28%; */
		box-shadow: 0rpx 6rpx 13rpx 0rpx rgba(28,48,75,0.18);
	}
 
	.scroll-view-item_H {
		display: inline-block;
		
	}
</style>
